<template>
  <div class="add-wr">
    <!-- 表单弹窗 -->
    <el-dialog
      title="录入"
      center
      :visible="showDialog"
      width="50%"
      custom-class="dialog-detail"
      v-cloak
      @close='closeDialog'
    >
      <el-form
        :model="ruleForm"
        ref="ruleForm"
        label-width="200px"
        class="demo-ruleForm"
        :rules="rules"
      >
        <el-form-item
          label="产品大类："
          prop="productBigType"
        >
          <el-input
            v-model="ruleForm.productBigType"
            placeholder="请选择产品大类名称"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="产品小类名称："
          prop="productSmallType"
        >
          <el-select
            v-model="ruleForm.productSmallType"
            placeholder="请选择产品小类名称"
            style="width:100%"
          >
            <el-option
              label="房产贷"
              value="1"
            ></el-option>
            <el-option
              label="房月供贷"
              value="2"
            ></el-option>
            <el-option
              label="装修贷"
              value="3"
            ></el-option>
            <el-option
              label="车月供贷"
              value="4"
            ></el-option>
            <el-option
              label="保单信用贷"
              value="5"
            ></el-option>
            <el-option
              label="社保贷"
              value="6"
            ></el-option>
            <el-option
              label="公积金贷"
              value="7"
            ></el-option>
            <el-option
              label="工资流水贷"
              value="8"
            ></el-option>
            <el-option
              label="企业税贷"
              value="9"
            ></el-option>
            <el-option
              label="企业票贷"
              value="10"
            ></el-option>
            <el-option
              label="企业流水贷"
              value="11"
            ></el-option>
            <el-option
              label="房抵经营贷"
              value="12"
            ></el-option>
            <el-option
              label="房抵消费贷"
              value="13"
            ></el-option>
            <el-option
              label="押车车贷"
              value="14"
            ></el-option>
            <el-option
              label="押证车贷"
              value="15"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="产品编号："
          prop="productCode"
        >
          <el-input
            v-model="ruleForm.productCode"
            placeholder="请输入产品编号"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="产品名称："
          prop="productName"
        >
          <el-input
            v-model="ruleForm.productName"
            placeholder="请输入产品名称"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="抵押物所在地："
          prop="houseAddr"
        >
          <el-select
            v-model="ruleForm.houseAddr"
            placeholder="请选择抵押物所在地"
            style="width:100%"
          >
            <el-option
              label="深圳"
              value="0"
            ></el-option>
            <el-option
              label="广州佛山"
              value="1"
            ></el-option>
            <el-option
              label="其他地区"
              value="2"
            ></el-option>
            <el-option
              label="全国"
              value="1000"
            ></el-option>
          </el-select>

        </el-form-item>
        <el-form-item
          label="最小风险系数："
          prop="riskMin"
        >
          <el-input
            v-model="ruleForm.riskMin"
            placeholder="最小风险系数"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="最大风险系数："
          prop="riskMax"
        >
          <el-input
            v-model="ruleForm.riskMax"
            placeholder="最大风险系数"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="最小额度(万)："
          prop="quotaMin"
        >
          <el-input
            v-model="ruleForm.quotaMin"
            placeholder="请输入最小额度(万)"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="最大额度(万)："
          prop="quotaMax"
        >
          <el-input
            v-model="ruleForm.quotaMax"
            placeholder="请输入最大额度(万)"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="最低利率(%)："
          prop="rateMin"
        >
          <el-input
            v-model="ruleForm.rateMin"
            placeholder="请输入最低利率(%)"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="最高利率(%)："
          prop="rateMax"
        >
          <el-input
            v-model="ruleForm.rateMax "
            placeholder="请输入最高利率(%)"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="最低期限(月)："
          prop="termMin"
        >
          <el-input
            v-model="ruleForm.termMin"
            placeholder="请输入最低期限(月)"
          ></el-input>
        </el-form-item>

        <el-form-item
          label="最高期限(月)："
          prop="termMax"
        >
          <el-input
            v-model="ruleForm.termMax"
            placeholder="请输入最高期限(月)"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="还款方式："
          prop="repaymentWay"
        >
          <el-select
            v-model="ruleForm.useModule"
            placeholder="请选择还款方式"
            style="width:100%"
          >
            <el-option
              label="先息后本"
              value="1"
            ></el-option>
            <el-option
              label="等额还款"
              value="2"
            ></el-option>
            <el-option
              label="随借随还"
              value="3"
            ></el-option>
            <el-option
              label="按日计息"
              value="4"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="还款方式名称："
          prop="repaymentWayName"
        >
          <el-input
            v-model="ruleForm.repaymentWayName"
            placeholder="请输入还款方式名称"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="审批时间："
          prop="approvalTime"
        >
          <el-input
            v-model="ruleForm.approvalTime"
            placeholder="请输入审批时间"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="可贷成数："
          prop="loanRatio"
        >
          <el-input
            v-model="ruleForm.loanRatio"
            placeholder="请输入可贷成数"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="产品亮点："
          prop="productHighlights"
        >
          <el-input
            v-model="ruleForm.productHighlights"
            placeholder="请输入产品亮点"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="产品标签："
          prop="productLabel"
        >
          <el-input
            v-model="ruleForm.productLabel"
            placeholder="请输入产品亮点"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="申请条件："
          prop="applicationConditions"
        >
          <el-input
            type="textarea"
            v-model="ruleForm.applicationConditions"
            placeholder="请输入申请条件"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="办理资料："
          prop="handlingInformation"
        >
          <el-input
            type="textarea"
            v-model="ruleForm.handlingInformation"
            placeholder="请输入办理资料"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="办理流程："
          prop="handlingProcess"
        >
          <el-input
            type="textarea"
            v-model="ruleForm.applicationConditions"
            placeholder="请输入办理流程："
          ></el-input>
        </el-form-item>
        <el-form-item
          label="常见问题："
          prop="commonProblem"
        >
          <el-input
            type="textarea"
            v-model="ruleForm.commonProblem"
            placeholder="请输入常见问题"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="使用模块："
          prop="useModule"
        >
          <el-select
            v-model="ruleForm.useModule"
            placeholder="请选择使用模块"
            style="width:100%"
          >
            <el-option
              label="匹配系统"
              value="1"
            ></el-option>
            <el-option
              label="热门产品展示"
              value="2"
            ></el-option>
            <el-option
              label="匹配系统/热门产品展示"
              value="3"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="利率展示："
          prop="rateShow"
        >
          <el-input
            v-model="ruleForm.rateShow"
            placeholder="请选择利率展示"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="利率类型："
          prop="rateType"
        >
          <el-select
            v-model="ruleForm.rateType"
            placeholder="请选择利率类型"
            style="width:100%"
          >
            <el-option
              label="日利率"
              value="1"
            ></el-option>
            <el-option
              label="月利率"
              value="2"
            ></el-option>
            <el-option
              label="年利率"
              value="3"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="贷款类型："
          prop="loanType"
        >
          <el-select
            v-model="ruleForm.loanType"
            placeholder="请选择贷款类型"
            style="width:100%"
          >
            <el-option
              label="抵押贷"
              value="1"
            ></el-option>
            <el-option
              label="信用贷"
              value="2"
            ></el-option>
          </el-select>
        </el-form-item>

      </el-form>

      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="resetForm">重置</el-button>

        <el-button
          type="primary"
          @click="confirm"
        >增加</el-button>
      </div>
    </el-dialog>
  </div>

</template>
<script>
export default {
  props: ["showDialog"],
  data() {
    return {
      ruleForm: {
        productBigType: "",
        productSmallType: "",
        productSmallTypeName: "",
        productCode: "",
        productName: "",
        houseAddr: "",
        riskMin: "",
        riskMax: "",
        quotaMin: "",
        quotaMax: "",
        rateMin: "",
        rateMax: "",
        termMin: "",
        termMax: "",
        repaymentWay: "",
        repaymentWayName: "",
        approvalTime: "",
        loanRatio: "",
        productHighlights: "",
        productLabel: "",
        applicationConditions: "",
        handlingInformation: "",
        handlingProcess: "",
        commonProblem: "",
        realNumberPeople: "",
        basicNumberPeople: "",
        perTwoHour: "",
        productSort: "",
        elementSort: "",
        useModule: "",
        rateShow: "",
        rateType: "",
        loanType: "",
        createTime: "",
        updateTime: "",
        isDelete: ""
      },
      rules: {
        productBigType: [
          { required: true, message: "请填写名称：", trigger: "blur" }
        ],
        productSmallType: [
          { required: true, message: "请选择产品类名称", trigger: "blur" }
        ],
        houseAddr: [
          { required: true, message: "请选择抵押物所在地", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    // 重置表单
    resetForm() {
      this.$refs["ruleForm"].resetFields();
    },
    closeDialog() {
      this.$emit("update:showDialog", false);
    },
    confirm() {
      this.$refs["ruleForm"].validate(valid => {
        if (valid) {
          Request.POST(
            {
              api: "http://imisty.cn:8088/product-config/add",
              data: this.ruleForm,
              ignore: true
            },
            res => {
              if (res.status == 200) {
                this.$message("添加成功");
                this.closeDialog();
              } else {
                this.$message("添加失败，请在检查一下呢");
              }
            }
          );
        } else {
          setTimeout(() => {
            document.querySelector(".el-form-item__error").scrollIntoView({
              behavior: "smooth",
              block: "center",
              inline: "center"
            });
          }, 500);
          console.log("error submit!!");
          return false;
        }
      });
    }
  }
};
</script>
<style >
.dialog-detail .el-dialog__body {
  max-height: 400px !important;
  overflow: auto !important;
}
</style>